import Taro, { Component, Config } from '@tarojs/taro'
import { Image, View } from '@tarojs/components'
import '@/styles/common/coupon-one.scss'
import './index.scss'
import { formatTime } from "@/utils/utils"
import { getMyCouponPage } from '@/api/userApi'
import couponImg from "@/assets/icon/my_coupon.png"
import couponActiveImg from "@/assets/icon/my_coupon_active.png"
import { Loading, LoadMore, ListEmpty } from '@/components/index'

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: '我的优惠券'
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: true,
      page: 1,
      limit: 10,
      loadStatus: 'loading',
      couponList: []
    }
  }

  componentWillMount() {
    this.getPage()
  }

  onReachBottom() {
    this.getPage()
  }

  //  分页获取优惠券
  getPage() {
    const { page, limit, couponList, loadStatus } = this.state
    if (loadStatus === 'noMore') {
      return
    }
    getMyCouponPage({ page, limit }).then(({ data }) => {
      const { list, totalCount } = data
      this.setState({
        page: page+1,
        couponList: page===1 ? list : couponList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading'
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  render() {
    const { loading, couponList, loadStatus } = this.state
    return (<View className='page d-f f-d-c'>
      {loading && <Loading isCover/>}
      <View className='coupon-list'>
        {couponList.map(coupon => {
          return (<View key={coupon.id} className='coupon-item coupon-one'>
            <View className='coupon-left'>
              {coupon.status !== 0 && <Image src={couponImg} className='coupon-img'/>}
              {coupon.status === 0 && <Image src={couponActiveImg} className='coupon-img'/>}
              <View className='coupon-price bnn-number d-f a-i-b'>
                <View className='price-unit'>￥</View>{coupon.amount}
              </View>
            </View>
            <View className='coupon-right'>
              <View className='coupon-top thin-border__b f-g-4'>
                <View className='coupon-name t-o-e-2'>{coupon.title}</View>
              </View>
              <View className='coupon-bottom d-f a-i-c j-c-b'>
                <View className='coupon-time'>{formatTime(coupon.fromtime, 'YY/MM/DD')}-{formatTime(coupon.totime, 'YY/MM/DD')}</View>
                {coupon.status === 1 && <View className='coupon-btn f-g-5 disabled'>已使用</View>}
                {coupon.status === -1 && <View className='coupon-btn f-g-5 disabled'>已过期</View>}
                {coupon.status === 0 && <View className='coupon-btn f-g-5'>待使用</View>}
              </View>
            </View>
          </View>)
        })}
      </View>
      {!couponList.length && loadStatus == 'noMore' ? (<ListEmpty/>) : (<LoadMore status={loadStatus}/>)}
    </View>)
  }
}
